<template>
  <view class="filter">
    <view class="filterLet">
      <!-- <view
        class="item"
        v-for="(item, index) of filter"
        :key="index"
        :class="[getClass(item)]"
      >
        <view class="text">{{ item.name }}</view>
        <view class="icon"></view>
      </view> -->
    </view>

    <view class="filterRig" @click="Emit.$emit('filter')">
      <i class="iconfont icon-nav-list"></i>
      <view class="text">{{ getStatus }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    filter: {
      type: Array,
      default() {
        return [];
      },
    },

    BatchProcessing: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    getClass() {
      return (item) => {
        return item.checked ? "on" : "";
      };
    },

    getStatus() {
      return this.BatchProcessing ? "取消批量" : "批量";
    },
  },

  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 24rpx;
  background: #f8f8f8;
  font-size: 24rpx;
  color: #666;
}

.filterLet {
  flex: 1;
  overflow: hidden;
  display: flex;

  .item {
    position: relative;
    padding-right: 30rpx;
    margin-right: 64rpx;
  }

  .text {
    color: #666;
  }

  .icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2rpx;
    border-width: 8rpx 8rpx 0;
    border-style: solid;
    border-color: #dbdbdb transparent transparent;
  }
}

.filterRig {
  display: flex;
  align-items: center;
  overflow: hidden;

  .iconfont {
    color: #262626;
    font-size: 36rpx;
  }

  .text {
    margin-left: 5rpx;
  }
}
</style>
